<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>居民详情</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            background: #f7f8fa;
            color: #222;
        }
        .container {
            max-width: 480px;
            margin: 30px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            padding: 24px 18px;
        }
        .title {
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 18px;
            text-align: center;
            letter-spacing: 2px;
        }
        .info-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .info-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 16px;
        }
        .info-item:last-child {
            border-bottom: none;
        }
        .label {
            color: #888;
            min-width: 90px;
        }
        .value {
            color: #222;
            text-align: right;
            word-break: break-all;
            max-width: 60%;
        }
        .error {
            color: #f56c6c;
            text-align: center;
            margin-top: 40px;
            font-size: 18px;
        }
        @media (max-width: 520px) {
            .container { margin: 0; border-radius: 0; }
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <div class="title">居民详情</div>
    <ul class="info-list" id="infoList"></ul>
    <div class="error" id="errorMsg" style="display:none;"></div>
</div>
<script>
    // 解析URL参数
    function getQueryParam(name) {
        const match = window.location.search.match(new RegExp('[?&]' + name + '=([^&]*)'));
        return match ? decodeURIComponent(match[1]) : null;
    }

    // 性别转换
    function genderText(g) {
        if (g === 1 || g === '1') return '男';
        if (g === 0 || g === '0') return '女';
        return '';
    }

    // 渲染居民信息
    function renderInfo(data) {
        const health = data.health || {};
        const infoArr = [
            { label: '姓名', value: data.name || '' },
            { label: '年龄', value: data.age || '' },
            { label: '电话', value: data.phone || '' },
            { label: '身份证', value: data.idCard || '' },
            { label: '现居地址', value: data.address || '' },
            { label: '籍贯', value: data.originPlace || '' },
            { label: '民族', value: data.nation || '' },
            { label: '性别', value: genderText(data.gender) },
            { label: '职业', value: data.occupation || '' },
            { label: '身高', value: health.height || '' },
            { label: '体重', value: health.weight || '' },
            { label: '血型', value: health.bloodType || '' }
        ];
        const list = document.getElementById('infoList');
        list.innerHTML = '';
        infoArr.forEach(item => {
            const li = document.createElement('li');
            li.className = 'info-item';
            li.innerHTML = `<span class="label">${item.label}</span><span class="value">${item.value}</span>`;
            list.appendChild(li);
        });
    }

    // 显示错误
    function showError(msg) {
        document.getElementById('infoList').style.display = 'none';
        const err = document.getElementById('errorMsg');
        err.style.display = 'block';
        err.textContent = msg;
    }

    // 主逻辑
    (function() {
        const id = getQueryParam('id');
        if (!id) {
            showError('未指定居民ID');
            return;
        }
        fetch(`/resident/getResidentDetail/${id}`)
            .then(res => res.json())
            .then(data => {
                // 兼容两种返回结构
                const info = data.data ? data.data : data;
                if (!info || !info.name) {
                    showError('未找到该居民信息');
                    return;
                }
                renderInfo(info);
            })
            .catch(() => {
                showError('获取居民信息失败');
            });
    })();
</script>
</body>
</html>